<template>
	<div class="card flex_col m5 p10">
		<label class="flex_center_self">放水</label>
		<div class="flex_row_center mt5 flex_end_self">
			<label>喷嘴位置:</label>
			<el-input v-model="ctx.mm" style="width: 100px;"/>
		</div>
		<div class="flex_row_center mt5 flex_end_self">
			<label>瞬热器温度:</label>
			<el-input v-model="ctx.temp" style="width: 100px;"/>
		</div>
		<div class="flex_row_center mt5 flex_end_self">
			<label>放水体积:</label>
			<el-input v-model="ctx.volume" style="width: 100px;"/>
		</div>
		<el-button class="mt5" @click="onClickDraw" type="primary">放水</el-button>
	</div>
</template>

<script setup lang="ts">

import { reactive } from 'vue';
import { runAction } from '../utils/ui';
import service from '../service/service';

interface Ctx {
	mm: string;
	temp: string;
	volume: string;
}

const ctx = reactive<Ctx>({
	mm: '120',
	temp: '80',
	volume: '100',
});

async function onClickDraw() {
	runAction('放水', '放水', async () => {
		await service.drawWater(parseInt(ctx.mm), parseInt(ctx.temp), parseInt(ctx.volume));
	});
}

</script>
